<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2022-12-25 18:14:33
 * @LastEditors: 47
 * @LastEditTime: 2023-02-04 16:51:51
-->
<template>
  <div class="specific-task" v-for="detail in detailList"  :key="detail.detail_id">

    <!-- 视频资料 -->
    <div v-if="detail.detail_type == 2">
        <!-- 任务点 -->
        <TaskPoint :point="detail.detail_status"/>
        <video :src="detail.detail_url" width="375" muted controls @ended="onPlayerEnded(detail.detail_id,detail.detail_status)"></video>   
    </div>
   
    <!-- 教学课件 -->
    <div v-if="detail.detail_type == 1">

      <!-- 任务点 -->
      <TaskPoint :point="detail.detail_status"/>
      <!-- 课件 -->
      <div class="task-courseware">
        
        <div class="task-inform">
         <a :href="detail.detail_url" target="_blank" @click="updatePointStatus(detail.detail_id,detail.detail_status)">
          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <div class="inform-box">

                <!-- 通知图片 -->
                <div class="inform-ppt">
                  <span class="iconfont icon-ppt img-ppt"></span>
                </div>

                <!-- 通知内容 -->
                <div class="inform-message">

                  <span class="message">
                    {{detail.detail_content}}
                    <!-- 书写 "一国两制" 实践新篇章.pptx -->
                  </span>

                  <span class="time">
                    559.29 MB
                  </span>
                  
                </div>
              </div>
            </template>
          </van-cell>
          </a>
        </div>
      </div>

    </div>
    
    <!-- 拓展阅读 -->
    <div v-if="detail.detail_type == 3">

       <!-- 任务点 -->
      <TaskPoint :point="detail.detail_status"/>
      <!-- 拓展 -->
      <div class="task-courseware">
        <div class="task-inform">
          <a :href="detail.detail_url" @click="updatePointStatus(detail.detail_id,detail.detail_status)">
          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <div class="inform-box">

                <!-- 通知图片 -->
                <div class="inform-word">
                  <span class="iconfont icon-word img-word"></span>
                </div>

                <!-- 通知内容 -->
                <div class="inform-message">

                  <span class="message">
                     {{detail.detail_content}}
                    <!-- 十九届六中全会决议全文.docx -->
                  </span>

                  <span class="time">
                    63.62 KB
                  </span>
                  
                </div>
              </div>
            </template>

          </van-cell>
          </a>
        </div>
      </div>

    </div>

    <div v-if ="detail.detail_type == 4"  style="padding:10px;">
      <a :href="detail.detail_url" class="task-font" @click="updatePointStatus(detail.detail_id,detail.detail_status)">
         {{detail.detail_content}}
        <!-- 中国这十年|一国两制在港澳的实践取得历史性成就中国这十年|一国两制在港澳的实践取得历史性成就中国这十年|一国两制在港澳的实践取得历史性成就中国这十年|一国两制在港澳的实践取得历史性成就 -->
      </a>
    </div>

  </div>
</template>

<script setup>
import {  defineProps,inject} from 'vue'
import {useRouter,useRoute} from 'vue-router'

const router = useRouter()
const route = useRoute()
// 引入仓库
import { useCourseStore } from '@/stores/course'
import { onMounted, ref, toRefs } from '@vue/runtime-core'
import { storeToRefs } from 'pinia'

//实例化仓库对象
const course = useCourseStore()
//解构方法
const { updateDetailTaskPoint } = course

const props = defineProps(['detailList'])


const onPlayerEnded = (detailId,detailStatus) => {
  if (detailStatus == 0) {
    updateDetailTaskPoint(detailId,1)
    console.log("更新detailStatus成功");
    reload()
  }
 }
const updatePointStatus = (detailId,detailStatus) => {
  if (detailStatus == 0) {
    updateDetailTaskPoint(detailId,1)
    console.log("更新detailStatus成功");
    reload()
  }
}


const reload = inject('reload')

</script>

<style lang="less" scoped>
.specific-task{

  .task-courseware{
    
    .task-inform{
    // border-bottom: 1px solid #f0f0f0;
    
    .inform-box{
      display: flex;
      flex-flow: row;
      align-items: center;
      padding: 10px;
      border-radius: 7px;
      background-color: #f4f5f7;

      .inform-ppt{
        background-color: #ff694e;
      }
      .inform-word{
        background-color: #579ff3;

      }

      .inform-ppt,
      .inform-word{
        width: 50px;
        height: 50px;
        border-radius: 7px;

        .img-word,
        .img-ppt{
          font-weight: 100;
          line-height: 50px;
          font-size: 30px;
          margin-left: 8px;
          color: #fdfefe;
        }
      }

      .inform-message{
        display: flex;
        flex-flow: column;
        margin-left: 16px;
        width: 180px;

        .message{
          font-size: 13px;
          /* 1.这个单词意思是文字显示不开必须强制一行显示 */
          white-space: nowrap;
          /* white-space: nowrap; */
          /* 2.溢出部分隐藏 */
          overflow: hidden;
          /* 3.文字溢出的时候用省略号显示 */
          text-overflow: ellipsis;
        }
        .time{
          color: #c2c2c2;
          font-size: 12px;
        }
      }
     
    }
   
    :deep(.van-cell__right-icon){
      margin-top: 15px;
    }
  }
  }

  .task-font{
    font-size: 15px;
    text-decoration: underline;
    color: #579ff3;
  }
}
</style>

